<template>
  <div>
    <!-- 兑奖列表 -->
    <my-breadcrumb :items="['抽奖设置', '兑奖列表']"/>
    <search :formItems='searchItems' @search='getList' ref='search' />
    <el-button type="primary" class="margin10" @click="getExcel" :loading="loading" style="margin-bottom: 10px;">导出</el-button>
    <el-table :data='tableData' @sort-change="sortChange" style='width: 100%'>
      <el-table-column type="index" label='序号' ></el-table-column>
      <el-table-column prop='createtime' sortable label='创建时间' ></el-table-column>
      <el-table-column prop='membername' label='用户名称' ></el-table-column>
      <el-table-column prop='prizename' label='奖品名称'></el-table-column>
      <el-table-column prop='img' label='奖品图片'>
        <template slot-scope="scope">
            <img :src="scope.row.img" alt="" width="40">
        </template>
      </el-table-column>
      <el-table-column prop='prizetype' label='奖品类型' >
        <template slot-scope="scope">
          <span v-if="scope.row.prizetype === '1'">实体奖品</span>
          <span v-if="scope.row.prizetype === '2'">优惠卷</span>
          <span v-if="scope.row.prizetype === '3'">现金奖</span>
        </template>
      </el-table-column>
      <el-table-column prop='info' label='兑奖信息'>
        <template slot-scope="scope">
          <img :src="scope.row.info" width="40" v-if="scope.row['coupon_type'] === '1' || scope.row['coupon_type'] === 1" />
          <span v-else>{{scope.row.info}}</span>
        </template>
      </el-table-column>
      <el-table-column prop='status' label='状态'>
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'">待发奖</span>
          <span v-if="scope.row.status === '1'">已发奖</span>
        </template>
      </el-table-column>
      <el-table-column prop='status' label='操作'>
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'" class="astyle"  @click="editStatus(1, scope.row.id)">已发奖</span>
          <!-- <span v-if="scope.row.status === '1'">完成发奖</span> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[20, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {toExport} from '@/utils/getList'
export default {
  name: 'redemptionList',
  data () {
    return {
      loading: false,
      tableData: [],
      searchItems: [
        {
          label: '奖品类型',
          type: 'select',
          key: 'type',
          options: [{ id: '1', name: '实体奖品' }, { id: '2', name: '优惠卷' }, { id: '3', name: '现金奖' }]
        },
        {
          label: '用户名称',
          type: 'input',
          key: 'membername'
        },
        {
          label: '奖品名称',
          type: 'input',
          key: 'prizename'
        },
        {
          label: '兑奖信息',
          type: 'input',
          key: 'info'
        },
        {
          label: '状态',
          type: 'select',
          key: 'status',
          options: [{ id: '1', name: '已发奖' }, { id: '0', name: '待发奖' }]
        }
      ],
      page: {
        page: 1,
        size: 20,
        total: 1
      },
      sortVal: {}
    }
  },
  methods: {
    getList (page = 1) {
      let searchData = {}
      if (this.$refs['search']) {
        searchData = this.$refs['search'].search()
      }
      let params = {
        ...searchData,
        page: page,
        size: this.page.size
      }
      if (typeof page !== 'number') {
        params.page = 1
      }
      if (this.sortVal.prop) {
        params.orderby = this.sortVal.prop + ' ' + this.sortVal.order
      }
      this.axios.get('/Luckdraw/exchangeindex', { params }).then(res => {
        if (res.data.status === 1 || res.data.status === '1') {
          this.page.page = page
          this.page.total = Number(res.data.data.count)
          this.tableData = res.data.data.list
        }
      })
    },
    editStatus (e = 1, val) {
      this.axios.post('/Luckdraw/editexchange', this.qs.stringify({ id: val })).then(res => {
        if (res.data.status === 1 || res.data.status === '1') {
          this.$message.success('成功')
          this.getList()
        }
      })
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getList(val)
    },
    getExcel () {
      this.loading = true
      let searchData = this.$refs['search'].search()
      toExport('/Luckdraw/excelexchange', searchData, '兑奖列表', () => {
        this.loading = false
      })
    },
    sortChange (data) {
      this.sortVal.prop = data.prop
      if (data.order === 'ascending') {
        this.sortVal.order = 'asc'
      } else if (data.order === 'descending') {
        this.sortVal.order = 'desc'
      } else {
        this.sortVal.order = ''
      }
      this.getList()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style scoped>
 .astyle{
    color: #409EFF;
    cursor:pointer;
 }
 .astyle:hover{
   color: #66b1ff;
 }
</style>
